import { View, Image, Text } from '@tarojs/components'
import { staticUrl } from '@/utils'
import onNavigation from '@/utils/command/onNavigation'
import './index.scss'

const rmbt_version = 'rmbt-v1'
// 热门必推
const label = staticUrl(`/img/index/${rmbt_version}/label.png`)
const generalize = staticUrl(`/img/index/${rmbt_version}/generalize.png`)

// 分销布局
export default ({ goods = { contentList: {} }, list }) => {
    const { contentList = { content: [] } } = goods
    const loading = list && list.length > 0

    const style = {
        backgroundImage: contentList['layoutBackground'] ? `url('${contentList['layoutBackground']}')` : undefined,
        marginBottom: goods['margin'] ? `${goods['margin']}px` : 0
    }
    return (
        <View>
            {
                loading ?
                    <View className="promotion" style={{ ...style }}>
                        <View className="promotion-main">
                            {
                                // 布局标题
                                contentList['advancedSettingTitle'] && (
                                    <View className="promotion-head">
                                        <Image lazyLoad className='text-img' src={contentList['layoutIcon']} />
                                        <View className="text">{contentList['advancedSettingTitle']}</View>
                                    </View>
                                )
                            }
                            <View className="promotion-body" >
                                {
                                    list.map((item, idx) => {
                                        return (
                                            <View className="promotion-body-item" key={item.id} onClick={() => onNavigation({ ...contentList,isDistribution:true })}>
                                                <Image lazyLoad className='goods-img' src={item.goodsThumbnail} />
                                                <View className="goods-info">
                                                    <View className="goods-name">
                                                        <Image lazyLoad className='label-img' src={label} />
                                                        <View className="goods-title">{item.goodsName}</View>
                                                    </View>
                                                    <View className="goods-operation">
                                                        <View><Text className="make-mone">赚￥</Text> <Text className="price">{item.directlyCommissionPrice}</Text> </View>
                                                        <View><Image lazyLoad className='generalize-img' src={generalize} /></View>
                                                    </View>
                                                </View>
                                            </View>
                                        )
                                    })
                                }
                            </View>
                        </View>
                    </View> : ""
            }
        </View>
    )
}
